<template>
	<u-grid :border="true" v-bind="$attrs">
		<template v-for="(item,index) in list" :key="index">
			<u-grid-item class="grid" :bgColor="bgColor" @click="itemFn(item)" v-if="item?.show !== false">
				<slot v-bind="{item,index}">
					<!-- 上下布局 -->
					<template v-if="type == 'tb'">
						<slot v-bind="{item,index}" :name="item.title">
							<view class="p-t-10 w100 tc">

								<image :src="getImgUrl(item.img)" lazy-load :mode="imgmode"
									:style="imgmode=='widthFix' ? {'width':item.imgWidth || imgWidth} : {'height':item.imgHight || imgHight}"
									class="m-b-5" v-if="item.img" />

								<slot :name="`${item.title}_value`" v-bind="{item,index}">
									<view class="tc">
										<template v-if="!isNaN(item.value)">
											<u-count-to style="margin-top: 0 !important;" bold fontSize="16"
												separator="," :color="item.color || '#0052D9'"
												:endVal="item.value =='--' ? 0 : item.value"
												:decimals="item.decimals || $attrs.decimals" />

											<text class="unit">{{item.unit}}</text>
										</template>
										<up-text v-else :lines="1" align="center" :text="item.value" bold
											:color="item.color || '#0052D9'" size="16" />
									</view>
								</slot>
							</view>
							<up-text class="p-y-10" :lines="1" align="center" :text="item.title" />
						</slot>
					</template>

					<!-- 左右布局 -->
					<template v-if="type == 'lr'">
						<slot v-bind="{item,index}" name="item.title">
							<view class="flex p-10 w100 s-center m-center" v-if="item.img">
								<view :style="{'width':imgViewWidth}" class="tc">
									<image :src="getImgUrl(item.img)" lazy-load :mode="imgmode" :style="imgmode=='widthFix' ?
										{'width':item.imgWidth || imgWidth} : 
										{'height':item.imgHight || imgHight}" />
								</view>
								<view class="tc f1 w0">
									<up-text :lines="1" :text="item.title" align="center" />
									<view class="m-t-5">
										<slot :name="`${item.title}_value`" v-bind="{item,index}">
											<template v-if="!isNaN(item.value)">
												<u-count-to bold fontSize="16" separator=","
													:color="item.color || '#0052D9'"
													:endVal="item.value =='--' ? 0 : item.value"
													:decimals="item.decimals ?? $attrs.decimals" />
												<text class="unit">{{item.unit}}</text>
											</template>
											<up-text v-else :text="item.value" bold :color="item.color || '#0052D9'"
												size="16" align="center" />
										</slot>
									</view>
								</view>
							</view>

							<view v-else class="flex m-between s-center w100 p-10">
								<up-text :lines="1" :text="item.title" />
								<view>
									<slot :name="`${item.title}_value`" v-bind="{item,index}">
										<template v-if="!isNaN(item.value)">
											<u-count-to bold fontSize="16" separator=","
												:color="item.color || '#0052D9'"
												:endVal="item.value =='--' ? 0 : item.value"
												:decimals="item.decimals ?? $attrs.decimals" />
											<text class="unit">{{item.unit}}</text>
										</template>
										<up-text v-else :text="item.value" bold :color="item.color || '#0052D9'"
											size="16" />
									</slot>
								</view>
							</view>
						</slot>
					</template>
				</slot>
			</u-grid-item>
		</template>
	</u-grid>
</template>

<script setup name="myGrid">
	/***
	 * props
	 * @property {Array} list 源数据
	 * @property {String | Number}  col宫格的列数
	 * @property {border} border 是否显示宫格的边框
	 * @property {decimals} decimals 要显示的小数位数 默认0
	 */
	const props = defineProps({
		list: {
			type: Array
		},
		// 内容布局风格
		type: {
			type: String,
			default: 'tb',
			validator(val) {
				return ['tb', 'lr'].includes(val);
			},
		},
		imgmode: {
			type: String,
			default: 'widthFix',
		},
		imgWidth: {
			type: String,
			default: '60%',
		},
		imgViewWidth: {
			type: String,
			default: '30%',
		},
		imgHight: {
			type: String,
		},
		bgColor: {
			type: String,
			default: '#F5F7FE',
		},
	})

	const emits = defineEmits(['click'])

	function itemFn(data) {
		emits('click', data)
	}
</script>

<style lang="scss" scoped>
	.grid {
		.unit {
			font-size: 24rpx;
			color: #828893;
			// margin-left: 8rpx;
		}
	}

	.u-border-bottom {
		border-bottom-width: 10rpx !important;
		border-color: #fff !important;
		border-bottom-style: solid;
	}

	.u-border-right {
		border-right-width: 10rpx !important;
		border-color: #fff !important;
		border-right-style: solid;
	}

	image {
		height: auto;
	}
</style>